
<app-carousel></app-carousel>

<br>
          
        <div class="container">
          
            <ul class="nav nav-tabs ">
                    <div class="btn-group btn-group-justified">                              
                    <a href="#home" class="btn btn-info " data-toggle="tab" aria-expanded="true">玄幻</a>
                    <a href="#profile" class="btn btn-info"  data-toggle="tab" aria-expanded="false">武侠</a>
                    <a href="#dropdown1" class="btn btn-info" data-toggle="tab" aria-expanded="false">言情</a>
                    <a href="#dropdown2" class="btn btn-info" data-toggle="tab" aria-expanded="false">悬疑</a>
                    <a href="#" class="btn btn-info">更多</a>
                </div>
                  </ul>
                  <br>
                  <div  class="tab-content well">
                    <div class="tab-pane fade active in" id="home">
                        <div class="panel panel-info" data-toggle="modal" data-target="#myModal">
                            <div class="panel-heading">
                              <h3 class="panel-title">铁梨花</h3>
                            </div>
                            <div class="panel-body">
                              Panel content
                            </div>
                        </div>
                        <div class="panel panel-info" data-toggle="modal" data-target="#myModal">
                                <div class="panel-heading">
                                  <h3 class="panel-title">铁梨花</h3>
                                </div>
                                <div class="panel-body">
                                  Panel content
                                </div>
                            </div>
                            <div class="panel panel-info" data-toggle="modal" data-target="#myModal">
                                    <div class="panel-heading">
                                      <h3 class="panel-title">铁梨花</h3>
                                    </div>
                                    <div class="panel-body">
                                      Panel content
                                    </div>
                                </div>

                          <div class="panel panel-info" data-toggle="modal" data-target="#myModal">
                                <div class="panel-heading">
                                  <h3 class="panel-title">螳螂</h3>
                                </div>
                                <div class="panel-body">
                                  Panel content
                                </div>
                              </div>


                              <div class="panel panel-info" data-toggle="modal" data-target="#myModal"> 
                                    <div class="panel-heading">
                                      <h3 class="panel-title">灰雀</h3>
                                    </div>
                                    <div class="panel-body">
                                      Panel content
                                    </div>
                                  </div>


                    </div>
                    <div class="tab-pane fade" id="profile">
                            <div class="panel panel-info">
                            <div class="panel-heading">
                              <h3 class="panel-title">十面埋伏</h3>
                            </div>
                            <div class="panel-body">
                              Panel content
                            </div>
                          </div>                    </div>
                    <div class="tab-pane fade" id="dropdown1">
                            <div class="panel panel-info">
                            <div class="panel-heading">
                              <h3 class="panel-title">锦衣夜行</h3>
                            </div>
                            <div class="panel-body">
                              Panel content
                            </div>
                          </div>                    </div>
                    <div class="tab-pane fade" id="dropdown2">
                            <div class="panel panel-info">
                            <div class="panel-heading">
                              <h3 class="panel-title">言情大战</h3>
                            </div>
                            <div class="panel-body">
                              Panel content
                            </div>
                          </div>                    
                        </div>

                  </div>

                  <ul class="pagination pagination-lg" style="margin-left: 10%;">
                        <li class="disabled"><a href="#">&laquo;</a></li>
                        <li class="m-active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">...</a></li>
                    
                        <li><a href="#">9</a></li>
                       
                        <li><a href="#">&raquo;</a></li>
                      </ul>
                      
                        <!-- 模态框（Modal） -->
                        <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 40%;">
                            <div class="modal-dialog">
                                <div class="modal-content ">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                           书的标题
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        书的简介书的简介书的简介书的简介书的简介书的简介书的简介书的简介书的简介书的简介书的简介书的简介书的简介
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                        </button>
                                        <a type="button" class="btn btn-success">
                                                收藏
                                        </a>
                                        <a type="button" class="btn btn-info" routerLink="/bookdetails" data-dismiss="modal">
                                            详情
                                        </a>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>
        </div>
